<template>
  <div id="SelectProvince">
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      width="800"
      style="min-height: 600px"
      :close-on-click-modal="false"
    >
      <template #header>
        <div class="my-header">高考省份</div>
      </template>
      <div class="province-box df curpoin">
        <div
          class="province-item-box"
          :class="{ isProvinceActive: isActive === index }"
          @click="handleCheckProvince(prov, index)"
          v-for="(prov, index) in provinceList"
          :key="prov.provinceCode"
        >
          <el-tooltip
            v-if="!prov.isEnabled"
            class="box-item"
            effect="dark"
            content="该省份教育考试院尚未公布详细选科要求"
            placement="top"
          >
            <span class="isEnabled"> {{ prov.provinceName }}</span>
          </el-tooltip>
          <span v-else class="">{{ prov.provinceName }}</span>
        </div>
      </div>
      <div class="year-box df">
        <div
          class="year curpoin"
          @click="handleCheckYear(year, index)"
          :class="{ isProvinceActive: isYearActive === index }"
          v-for="(year, index) in yearList"
          :key="year.year"
        >
          {{ year.year }}年选科
        </div>
      </div>
      <div class="tip-box f12">
        使用说明：
        <p>
          1、本系统选科查询结果根据教育考试院发布“普通高校专业（类）选考科目范围”；
        </p>
        <p>
          2、用户应根据自己的兴趣特长、职业生涯规划和学习情况等，结合选考科目范围综合考虑，自主确定选考科目；
        </p>
        <p>3、因少量院校不定期进行学科专业调整，本系统选科推荐辅助参考。</p>
      </div>
      <div class="btn-box" @click="handleConfirm">
        <el-button style="width: 500px; height: 45px" type="primary"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue';
import { useStore } from 'vuex';
import bus from '@/utils/bus';

const props = defineProps({
  provinceList: {
    type: Array,
    default: () => [],
  },
});
const yearList = ref([]);
const checkedProv = ref({});
const store = useStore();
const isActive = ref('0');
const isYearActive = ref('0');
const dialogVisible = ref(false);
watch(
  () => store.getters.user.provinceData,
  (newValue) => {
    if (newValue.years[0].mode == '3_1_2') {
      localStorage.setItem('xk_type', '3');
    } else if (newValue.years[0].mode == '6_3') {
      localStorage.setItem('xk_type', '2');
    } else if (newValue.years[0].mode == '7_3' && newValue.provinceCode == 33) {
      localStorage.setItem('xk_type', '2');
    }
  },
);
const handleCheckProvince = (item, index) => {
  if (!item.isEnabled) {
    return;
  } else {
    checkedProv.value = item;
    yearList.value = item.years;
    isActive.value = index;
    isYearActive.value = 0;
    // 获取默认选中的第一个年份数据
    const defaultYearData = yearList.value[isYearActive.value];
    checkedProv.value.year = defaultYearData.year;
  }
};
const handleCheckYear = (item, index) => {
  checkedProv.value.year = item.year;
  isYearActive.value = index;
};

const handleConfirm = () => {
  const { mode } = checkedProv.value.years[isYearActive.value || 0];

  dialogVisible.value = false;
  // 设置下拉数据-对应省份
  store.commit(
    'znxk/set_subjectOptions',
    checkedProv.value.years[isYearActive.value || 0].subjects,
  );
  // 设置省份数据
  store.dispatch('znxk/changeCurrentCityeInfo', {
    provinceCode: checkedProv.value.provinceCode,
    year: checkedProv.value.year,
    xk_type: checkedProv.value.years[0].mode == '3_1_2' ? 3 : 2,
    provinceName: checkedProv.value.provinceName,
  });
  store.dispatch('user/changeNewSelectSubjectData', checkedProv.value);
  store.commit('user/set_newSelectSubjectData', checkedProv.value);
  store.dispatch('user/changeChangeProvinceYear', checkedProv.value.year);
  bus.emit('updataSelectMatchRatio', checkedProv.value);
  bus.emit('updataXkType', mode == '3_1_2' ? 3 : 2);
  bus.emit('updataXKpid', checkedProv.value.provinceCode);
};
const handleChangeVisible = (defaultProvince) => {
  defaultProvince.year = defaultProvince.graduate_time || defaultProvince.year;
  // 找到默认省份在列表中的索引
  const defaultProvinceIndex = props.provinceList.findIndex(
    (prov) =>
      prov.provinceCode == defaultProvince.pid ||
      prov.provinceCode == defaultProvince.provinceCode,
  );
  if (defaultProvinceIndex !== -1) {
    isActive.value = defaultProvinceIndex; // 设置默认选中的省份
    yearList.value = props.provinceList[defaultProvinceIndex].years; // 更新年份列表
    // 找到默认年份在年份列表中的索引
    const defaultYearIndex = yearList.value.findIndex(
      (year) => year.year == defaultProvince.year,
    );
    if (defaultYearIndex !== -1) {
      isYearActive.value = defaultYearIndex; // 设置默认选中的年份
    } else {
      isYearActive.value = 0; // 默认选中第一个年份
    }
  }
  // 获取默认年份的数据;
  const defaultYearData = yearList.value[isYearActive.value];
  // 获取默认省份的数据
  const defaultProvinceData = props.provinceList[defaultProvinceIndex];
  checkedProv.value = { ...defaultProvinceData };
  checkedProv.value.year =
    (defaultYearData && defaultYearData.year) ||
    localStorage.getItem('defaultYear');

  dialogVisible.value = true;
};
defineExpose({
  handleChangeVisible,
});
</script>

<style lang="scss" scoped>
#SelectProvince {
  .my-header {
    border-bottom: 1px solid #e8ebf3;
    padding: 20px;
  }
  .province-box {
    width: 100%;
    flex-wrap: wrap;
    border-bottom: 1px solid #e8ebf3;
    .province-item-box {
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #e8ebf3;
      margin: 10px 14px;
      border-radius: 6px;
    }
  }
  .year {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 10px 10px;
    border: 1px solid #e8ebf3;
    border-radius: 6px;
  }
  .tip-box {
    // width: 100%;
    margin: 10px 10px;
    padding: 10px;
    border: 1px dashed var(--color-text);
    background-color: var(--background-rgba);
  }
  .btn-box {
    margin-top: 30px;
    border-top: 1px solid #e8ebf3;
    text-align: center;
    padding-top: 20px;
  }
}
:deep(.el-dialog) {
  padding: 10px 0 30px 0 !important;
}
.isProvinceActive {
  border: 1px solid var(--color-text) !important;
  color: var(--color-text);
}
.isEnabled {
  color: #999;
}
</style>
